<div ...attributes>
  <FieldsFor @model={{this.model}} @style={{if this.style this.style "horizontal"}} as |f|>
    {{f.select-field "rateLimitMode" label="Rate Limit" options=this.rateLimitModeOptions}}

    {{#if this.model.isRateLimitModeCustom}}
      <FormFields::FieldWrapper @style={{if this.style this.style "horizontal"}}>
        <table class="table table-striped table-sm table-small custom-rate-limits-table">
          <thead>
            <tr>
              <th>Duration</th>
              <th></th>
              <th>Limit By</th>
              <th>Limit</th>
              <th class="text-center">
                Primary
                <button type="button" class="btn btn-link btn-tooltip tooltip-trigger" data-tippy-content="<p>Controls which rate limit will return its status in the HTTP response headers. This informs the end-users of this limit and how many remaining requests they have. For example:</p>
  <pre class='code-block'>
  X-RateLimit-Limit: 1000
  X-RateLimit-Remaining: 840
  </pre>
  <p>Only one rate limit may return this status information, so it will likely be your primary, publicized rate limit (for example, hourly), and not more granular rate limits you may have assigned (for example, per-second limits).</p>">
                  <FaIcon @icon="question-circle" /><span class="sr-only">Help</span>
                </button>
              </th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {{#if this.model.rateLimits}}
              {{#each this.model.rateLimits as |rateLimit|}}
                <tr>
                  <td>
                    <Input @type="text" @value={{rateLimit.durationInUnits}} class="form-control form-control-sm rate-limit-duration-in-units" aria-label="Duration" />
                  </td>
                  <td style="text-align: left;">
                    <SelectMenu @value={{rateLimit.durationUnits}} @action={{action (mut rateLimit.durationUnits)}} @options={{this.rateLimitDurationUnitOptions}} @inputClass="custom-select custom-select-sm rate-limit-duration-units" />
                  </td>
                  <td>
                    <SelectMenu @value={{rateLimit.limitBy}} @action={{action (mut rateLimit.limitBy)}} @options={{this.rateLimitLimitByOptions}} @inputClass="custom-select custom-select-sm rate-limit-limit-by" />
                  </td>
                  <td>
                    <div class="input-group input-group-sm">
                      <Input @type="text" @value={{rateLimit.limit}} class="form-control rate-limit-limit" aria-label="Limit" />
                      <div class="input-group-append">
                        <span class="input-group-text">requests</span>
                      </div>
                    </div>
                  </td>
                  <td class="text-center">
                    <div class="custom-control custom-radio custom-control-no-label mt-1">
                      <input
                        type="radio"
                        name={{this.uniqueSettingsId}}
                        id={{concat this.uniqueSettingsId "_" rateLimit.uniqueId}}
                        checked={{rateLimit.responseHeaders}}
                        value={{true}}
                        class="rate-limit-response-headers custom-control-input"
                        onclick={{action "primaryRateLimitChange" rateLimit}}
                      />
                      <label class="custom-control-label" for="{{this.uniqueSettingsId}}_{{rateLimit.uniqueId}}"><span class="sr-only">Use as primary rate limit</span></label>
                    </div>
                  </td>
                  <td class="table-row-actions">
                    <a href="#" class="remove-action" {{action "deleteRateLimit" rateLimit}}><FaIcon @icon="times" />Remove</a>
                  </td>
                </tr>
              {{/each}}
            {{else}}
              <tr class="empty"><td colspan="6">No custom rate limits have been added yet. Click "Add Rate Limit" below to get started.</td></tr>
            {{/if}}
          </tbody>
        </table>
        <button type="button" class="btn btn-light btn-sm" {{action "addRateLimit"}}><FaIcon @icon="plus-circle" /> Add Rate Limit</button>
      </FormFields::FieldWrapper>
    {{/if}}
  </FieldsFor>
</div>